<template>
  <div class="app-container calendar-list-container">
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-button class="filter-item" type="primary" size="small" @click="addMenu">添加</el-button>
    </section>
    <!-- 表格 -->
    <el-table :data="dataList"  v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
        <el-table-column type="index" width="50" align="center"/>
        <el-table-column prop="signin_name" align="center" label="名称" ></el-table-column>
        <el-table-column prop="integraltype_name" align="center" label="积分类型名称" ></el-table-column>
        <el-table-column prop="day_num" align="center" label="连续天数" ></el-table-column>
        <el-table-column prop="score" align="center" label="每次签到积分奖励" ></el-table-column>
        <el-table-column prop="create_time" align="center" label="发布时间" ></el-table-column>
        <el-table-column  label="操作" align="center" width="100">
          <template slot-scope="scope">
            <i class="iconfont ali-edit-2" @click="editForm(scope.row)"></i>
            &nbsp;
            <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 模态框 -->
    <section>
      <el-dialog :title="singninStatte=='add'?'新增签到':'编辑签到'" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="editDeptForm" ref="createActive">
            <el-form-item label="名称" prop="signin_name" :rules="filter_rules({required:true})">
              <el-input v-model.trim="editDeptForm.signin_name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="积分类型" prop="integraltype_id" :rules="filter_rules({required:true})">
              <el-select clearable v-model="editDeptForm.integraltype_id" placeholder="请选择积分类型" style="width:100%">
                <el-option v-for="item in options" :key="item.integraltype_name" :label="item.integraltype_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="连续天数" prop="day_num" :rules="filter_rules({required:true})">
              <el-input v-model.trim="editDeptForm.day_num" placeholder="请输入连续天数"></el-input>
            </el-form-item>
            <el-form-item label="每次签到积分奖励" prop="score" :rules="filter_rules({required:true})">
              <el-input v-model.trim="editDeptForm.score" placeholder="请输入每次签到积分奖励"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit('createActive')">确 定</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>

<script>
import { get_SigninList, signin_Save, signin_Edit, signin_Delete } from "@/api/signin";
import { integraltype_listAll } from "@/api/integraltype";
import SoPagination from '@/components/SoPagination'

export default {
  name: "singnIn",
  components: { SoPagination },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      singninStatte: "",
      options: [],
      dataList: [],
      editDeptForm: {},
      currentPage: 1,
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      multipleSelection: []
    };
  },
  methods: {
    addMenu() {//添加签到管理
      this.dialogFormVisible = true;
      this.singninStatte = "add";
      this.editDeptForm = {}; //清空数据
      this.infoList();
    },
    editForm(scopeRow) {//编辑签到管理
      this.dialogFormVisible = true;
      this.singninStatte = "edit";
      this.editDeptForm = Object.assign({}, scopeRow);;
      this.infoList();
    },
    async delRow(row) {   //删除
      try {
        let res = await this.$confirm('确认删除吗？')
        if (res == 'confirm') {
          this.loading = true;
          let { data } = await signin_Delete(row);
          this.loading = false;
          if (data.status == 100) {
            this.$message.success('删除成功')
            this.initList();
          }
        }
      } catch (error) {
        console.log(error, 'error')
      }
    },
    async saveObj() {
      const query = {...this.editDeptForm, company_id: localStorage.getItem("companyId") - 0}
      this.loading = true;
      const { data } = this.singninStatte == "add" ? await signin_Save(query) : await signin_Edit(query);
      this.loading = false;
      if (data.status == 100) {
        this.$message.success(this.roleSatte == 'add' ?'添加成功' : '编辑成功');
        this.initList();
      }
    },
    async onSubmit(e) {//保存数据
      this.$refs[e].validate(valid => {
        if (valid) {
          this.saveObj();
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
    async initList() {//获取数据
      this.loading = true;
      const query = {...this.listQuery, company_id: localStorage.getItem("companyId") - 0}
      const { data } = await get_SigninList(query);
      this.loading = false;
      if (data.status == 100) {
        this.dataList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    },
    async infoList() {//查询积分类型
      const query = {company_id: localStorage.getItem("companyId") - 0};
      const { data } = await integraltype_listAll(query);
      if (data.status == 100) {
        this.options = data.data.rows;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}
.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}
</style>
